
<!--  -->
<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="2" style="text-align: left;">
          <el-button type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
        </el-col>
        <el-col :span="16">
          <div class="grid-content">
            <!-- <el-button>刷新</el-button> -->
          </div>
        </el-col>

        <el-col :span="6" style="text-align: right;" v-show="user.isLogin == 1">
          <span style="font-size: 16px; color: #ffffff;">{{user.userName}}</span>
          <el-button type="primary" class="el-icon-shopping-cart-full" @click="shoppingCart"></el-button>
          <!-- <a href="http://localhost:8080/#/shoppingcart"><i class="el-icon-shopping-cart-full"></i></a> -->
          <el-dropdown>
            <i class="el-icon-setting" style="margin-left: 15px; color: #ffffff"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="usercenter">用户中心</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" style="text-align: right;" v-show="user.isLogin == 0">
          <el-button size="mini" @click="toLogin()">登录</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <Login v-show="showLoginDialog" @loginsuccess="loginsuccess" @toregister="ToRegister"></Login>
      <Register v-show="showRegisterDialog" @tologin="toLogin"></Register>
    </el-main>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Login from "@/components/Login/Login";
import Register from "@/components/Login/Register";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Login, Register },
  data() {
    //这里存放数据
    return {
      showLoginDialog: false,
      showRegisterDialog: false,
      user: {
        isLogin: 0,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    back(){
      this.$router.back();
    },
    toLogin() {
      this.showLoginDialog = true;
      this.showRegisterDialog = false;
    },
    loginsuccess() {
      this.user.isLogin = 1;
      this.showLoginDialog = false;
    },
    ToRegister() {
      this.showLoginDialog = false;
      this.showRegisterDialog = true;
    },
    shoppingCart() {
      this.$router.push("/shoppingcart");
    },
    logout() {
      var url = process.env.URL_HEAD + "/touser/user/page/logout";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            // this.$message.success("退出成功！");
            location.reload();
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
    },
    usercenter() {
      window.open(process.env.USERCENTER_URL);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let url = process.env.URL_HEAD + "/touser/user/page/check/login";
    this.$http.get(url, { withCredentials: true }).then(
      (response) => {
        console.log(response.data);

        if (response.data.status == "ok") {
          this.user.isLogin = 1;
          this.user.userName = response.data.userName;
        } else {
          console.log("no login");
        }
      },
      (response) => {}
    );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-header {
  background-color: #69a57b;
  color: #333;
  line-height: 50px;
  text-align: center;
}

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
}

.main-div {
  left: 200px;
}

.grid-content {
  min-height: 36px;
}
</style>